import React, { useState } from "react";
import "./Shou.css";
import "animate.css";
import { AppstoreOutline, UnorderedListOutline } from "antd-mobile-icons";
import { ProgressBar, Space } from "antd-mobile";
import { useNavigate } from "react-router-dom";

export default function Shou() {
  let [flag, setFlag] = useState(false);
  let [step, setStep] = useState(4697);
  let Navigate = useNavigate();
  return (
    <div id="shou" className="animate__animated animate__fadeInDown">
      {/* head */}
      <div id="head">
        <p className="hello">Hello,</p>
        <p className="name">靓仔</p>
        <AppstoreOutline
          style={{
            position: "absolute",
            right: "15%",
            top: "55%",
            fontSize: "clamp(0.1rem, 7vw, 5rem)",
          }}
          onClick={() => {
            setFlag(false);
          }}
        />
        <UnorderedListOutline
          style={{
            position: "absolute",
            right: "5%",
            top: "55%",
            fontSize: "clamp(0.1rem, 7vw, 5rem)",
          }}
          onClick={() => {
            setFlag(true);
          }}
        />
      </div>
      {/* step */}
      <div className="step">
        <Space direction="vertical" block className="space">
          <p className="text">{step}/6000</p>
          <ProgressBar percent={(step / 6000) * 100} className="progress"/>
        </Space>
      </div>
      {/* content */}
      <div>
        {flag ? (
          <div className="animate__animated animate__fadeInLeft" id="box">
            <div className="box11">
              <div
                onClick={() => {
                  Navigate("/food");
                }}
              >
                <p>食物</p>
                <p className="data">1688</p>
                <p className="unit">千卡</p>
              </div>

              <button
                className="ad"
                onClick={() => {
                  Navigate("/addFood");
                }}
              >
                +
              </button>
            </div>
            <div
              className="box1"
              onClick={() => {
                Navigate("/sleep");
              }}
            >
              <p>睡眠</p>
              <p className="data">8</p>
              <p className="unit">小时</p>
            </div>
            <div
              className="box1"
              onClick={() => {
                Navigate("/water");
              }}
            >
              <p>饮水</p>
              <p className="data">2</p>
              <p className="unit">杯</p>
            </div>
            <div
              className="box1"
              onClick={() => {
                Navigate("/sport");
              }}
            >
              <p>运动</p>
              <p className="data">13</p>
              <p className="unit">分钟</p>
            </div>

            <button
              className="add1"
              onClick={() => {
                Navigate("/found");
              }}
            >
              +添加
            </button>
          </div>
        ) : (
          <div className="animate__animated animate__slideInLeft" id="box">
            <div className="box22">
              <div
                onClick={() => {
                  Navigate("/food");
                }}
              >
                <p>食物</p>
                <p className="data">1688</p>
                <p className="unit">千卡</p>
              </div>

              <button
                className="add"
                onClick={() => {
                  Navigate("/addFood");
                }}
              >
                +
              </button>
            </div>
            <div
              className="box2"
              onClick={() => {
                Navigate("/sleep");
              }}
            >
              <p>睡眠</p>
              <p className="data">8</p>
              <p className="unit">小时</p>
            </div>
            <div
              className="box2"
              onClick={() => {
                Navigate("/water");
              }}
            >
              <p>饮水</p>
              <p className="data">2</p>
              <p className="unit">杯</p>
            </div>
            <div
              className="box2"
              onClick={() => {
                Navigate("/sport");
              }}
            >
              <p>运动</p>
              <p className="data">13</p>
              <p className="unit">分钟</p>
            </div>

            <button
              className="add2"
              onClick={() => {
                Navigate("/found");
              }}
            >
              +添加
            </button>
          </div>
        )}
      </div>
    </div>
  );
}
